<form class="form-horizontal" name="port_form" ng-submit="do_upsert()">
  <div class="modal-header">
    <a class="close" ng-click="close()">&times;</a>
    <div class="input-prepend input-append">
      <h4>关联虚拟机</h4>       
    </div>
  </div>
  <div class="modal-body">
      <div class="row-fluid">
          <div class="span10">
          </div>
          <div class="span2">
              <span>每页显示</span>
              <select class="input-mini" ng-model="page_size" ng-options="pz for pz in page_sizes" ng-change="change(page_size)">
              </select>
              <span>条</span>
          </div>
      </div>
    <table class="table table-bordered table-condensed">
    <thead>
    <tr>
        <!--<th><input type="checkbox" ng-model="selected_all"/></th>-->
        <th>名称</th>
        <th>主机名称</th>
        <th>操作系统</th>
        <th>状态</th>
        <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <tr selectable='m' ng-repeat="m in vms" ng-click="bodyclick(m)">
        <!--<td><input type="checkbox" value="{{m.id}}" ng-model="selected[m.id]" /></td>-->

        <td>{{ m.name }}</td>
                <td>{{ m.host.host_name }}</td>
                <td>
                    <img ng-src="/static/images/os16/os_{{ m.os_type |lowercase }}.png" alt="" class="img-size16"/>
                    {{ m.os_type }}
                </td>

                <td>
                    <img ng-src="/static/images/vmstatus/{{ m.status }}.png" alt="" class="img-size16"/>
                    {{ m.status | vmstatus }}
                </td>
        <td>{{ m.description }}</td>

    </tr>
    </tbody>
</table>
<div class="pagination">
    <ul>
        <li ng-hide="should_hide()" ng-class="prev_class" ng-click="prev()"><a href="javascript:void(0);">上一页</a></li>
        <li ng-repeat="i in [] | range:page_count()" ng-hide="should_hide()" ng-click="page(i)" ng-class="(i == current_page) && 'active'">
            <a href="javascript:void(0)">{{i + 1}}</a>
        </li>
        <li ng-hide="should_hide()" ng-class="next_class" ng-click="next()"><a href="javascript:void(0);">下一页</a></li>
    </ul>
</div>
      <div id="show_interface" ng-show="interface_show">
        <table class="table table-striped table-bordered table-condensed">
            <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <th>所属网络</th>
                <th>网卡类型</th>
            </tr>
            </thead>
            <tbody>
            <tr selectable="interface" ng-repeat="interface in interfaces" ng-click="interfaceClick(interface)">
                <td><input type="checkbox" value="{{interface.id}}" ng-model="checked[interface.id]" /></td>
                <td>{{interface.name}}</td>
                <td>{{interface.network.name}}</td>
                <td>{{interface.model}}</td>
            </tr>
            </tbody>
        </table>
    </div>
  </div>


  <div class="modal-footer">
    <a data-dismiss="modal" class="btn" ng-click="close()">关闭</a>
    <button type="submit" ng-disabled="!port_form.$valid" class="btn btn-primary">保存</button>
  </div>
</form>